<template>
  <div id="app" v-if="$store.getters.loadDone">
    <!-- 构建一个路由展示区域用于展示主页面的内容 -->
    <router-view />
    <!-- 
      左侧的弹出层
      通过store.state.pageControl.leftPopupShow控制显示装填
    -->
    <van-popup
      v-model="$store.state.pageControl.leftPopupShow"
      position="left"
      get-container="body"
      round
      :style="{ width: '60%', height: '100%' }"
    >
      <!-- 弹出层的头部显示 -->
      <div class="left-popup-header" :style="note">
        <div class="left-popup-header-body">
          <!-- 用户的显示 -->
          <van-row class="user-card" type="flex" align="center">
            <van-col>
              <!-- 如果用户登录了显示用户头像，没有登录显示农大图标 -->
              <van-image
                round
                class="photo"
                :src="$store.state.userinfo.image"
                width="70px"
                height="70px"
                v-if="$store.getters.isAuthenticated"
              />
              <van-image
                round
                class="photo"
                src="./static/icon/school_badge.png"
                width="70px"
                height="70px"
                v-else
              />
            </van-col>
            <!-- 如果登录了显示用户名，没有登录显示“请登录” -->
            <van-col class="left-popup-header-body-uname">
              <h1 v-if="$store.getters.isAuthenticated">{{ $store.state.userinfo.username }}</h1>
              <h1 v-else>请登录</h1>
            </van-col>
          </van-row>
          <!-- 如果没有登录显示“登录”或者“注册”按钮,如果登录了显示“登出”按钮 -->
          <van-row align="center">
            <van-col span="12" offset="12" v-if="!$store.getters.isAuthenticated">
              <van-button type="primary" size="mini" @click="toLogin">登录</van-button>
              <van-button type="primary" size="mini" @click="toRigister">注册</van-button>
            </van-col>
            <van-col span="8" offset="16" v-else>
              <van-button type="primary" size="mini" @click="toLogout">登出</van-button>
            </van-col>
          </van-row>
        </div>
      </div>
      <!-- 进行快捷的跳转操作，等所有页面都编写完成后，在制作此功能 -->
      <van-cell-group>
        <van-cell icon="location-o" title="首页" />
        <van-cell icon="location-o" title="社区" />
        <van-cell icon="location-o" title="搜索" />
        <van-cell icon="location-o" title="单元格" />
        <van-cell icon="location-o" title="单元格" />
        <van-cell icon="location-o" title="意见反馈" />
      </van-cell-group>
    </van-popup>
    <!-- 顶部弹出层，会弹出搜索选项 -->
    <van-popup
      v-model="$store.state.pageControl.topPopupShow_search"
      position="top"
      :overlay="false"
      round
      :style="{ width: '100%', top: '7%' }"
    >
      <van-search v-model="search_v" placeholder="请输入搜索关键词" />
    </van-popup>
    <!-- 自定义的遮罩层，为了显示头部内容 -->
    <van-overlay :show="overlayShow" @click="closeTopPopup" />
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'App',
  data() {
    var image =
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593057781558&di=7eceab0927f28bb4f733e9acf2b61298&imgtype=0&src=http%3A%2F%2Fimg.ewebweb.com%2Fuploads%2F20191225%2F20%2F1577277759-HgRsdZIwar.jpg'
    return {
      note: {
        background: 'url(' + image + ') no-repeat center top',
        'background-size': '100%',
        width: '100%',
        height: '20%'
      },
      search_v: '',
      listloading: true,
      listfinished: true,
    }
  },
  computed: {
    overlayShow() {
      return this.$store.getters.topPopouOverlayShow
    }
  },
  methods: {
    ...mapMutations(['closeTopPopup', 'openLeftPopup']),
    toLogout() {
      this.$http
        .get('/account/logout')
        .then(res => {
          if (res.data.status === 200) {
            this.$dialog({ message: res.data.msg })
            this.$store.state.userinfo.username = null
            this.openLeftPopup()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    toLogin() {
      this.$router.push('/login')
      this.openLeftPopup()
    },
    toRigister() {
      this.$router.push('/register')
      this.openLeftPopup()
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  background-color: #f7f8fa;
  margin-top: 45px;
  margin-bottom: 50px;
}
.headers {
  padding-top: 15px;
  position: fixed;
  z-index: 100;
}
</style>
<style scoped>
.left-popup-header-body {
  width: 100%;
  height: 100%;
}
.left-popup-header-body-uname {
  padding-left: 5%;
}
.user-card {
  padding-top: 10%;
  padding-left: 7%;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
</style>